<template>


    <div style="width:900px;height:500px;">
      <div style="width:400px;float: left;">
        <el-tree
        :data="dataSource"
        default-expand-all
        :props="defaultProps"
        >
        <template #default="{ node, data }">
            <span class="custom-tree-node">
            <span>{{ node.label }}</span>
            <span v-if="data.isShowType">
                <a @click="append(data)"> 添加</a>
            </span>
            <span v-if="data.organizeId != null && data.type == 1">
                <a @click="append(data, 1)"> 添加部门</a>
                <a @click="append(data, 2)"> 添加岗位</a>
            </span>
            <span v-if="data.organizeId != null && data.type == 2">
                <a @click="append(data, 3)"> 添加员工</a>
            </span>
            </span>
        </template>
    </el-tree>
    </div>
      <!-- <div style="width:400px;float: right;">
        <Group/>
        </div> -->
    </div>
    
    
    <el-dialog
        v-model="dialogVisible"
        v-if="dialogVisible"
        :title="parentData.name"
        width="30%"
        :before-close="handleClose"
    >
    <div v-if="parentData.showType==2">
        <el-input v-model="formName" placeholder="部门名称" />
    </div>
    <div v-if="parentData.showType==3">
        <el-input v-model="formName" placeholder="园区名称" />
    </div>
    <div v-if="parentData.showType==1">
        <el-input v-model="formName" placeholder="管理员名称" />
        <el-input v-model="formPassword" placeholder="管理员密码" />
    </div>
    <div v-if="parentData.organizeId != null && formSubType == 1">
        <el-input v-model="formName" placeholder="部门名称" />
    </div>
    <div v-if="parentData.organizeId != null && formSubType == 2">
        <el-input v-model="formName" placeholder="岗位名称" />
        <el-input v-model="formIsManage" placeholder="是否是管理" />
    </div>
    <div v-if="parentData.organizeId != null && formSubType == 3">
        <el-input v-model="formName" placeholder="员工名称" />
        <el-input v-model="formPassword" placeholder="员工密码" />
    </div>


        <template #footer>
        <span class="dialog-footer">
            <el-button type="primary" @click="addData">
            提交
            </el-button>
        </span>
        </template>
    </el-dialog>


        <Acl />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import httpRequest from '@/request/index'
import Acl from '../components/Acl.vue';


const dataSource = ref([])
const dialogVisible = ref(false)
const parentData = ref()
const formIsManage = ref()
const formSubType = ref(0)

const formName = ref('')
const formIsJob = ref('')
const formPassword = ref('')

onMounted(() => {
    loadData()
})

function loadData() {
    httpRequest({
        url: '/auth/organize/all',
        method: 'get',
    }).then((res) => {
        if (res.code === 0) {
            dataSource.value = res.data
        }
    })
}

function append (data, subType) {
    formName.value = ''
    formIsJob.value = ''
    formPassword.value = ''
    dialogVisible.value = true
    parentData.value = data
    
    formIsManage.value = ''
    formSubType.value = subType
    if (subType == null && parentData.value.showType == 2) {
        formSubType.value = 1
    }
    
}

function addData() {

    if (parentData.value.isShowType) {

        if (parentData.value.showType == 1) {
            addUser()
        } else if (parentData.value.showType == 2) {
            addOrganize()
        } else {
            addTenant()
        }
    } else {
        if (parentData.value.organizeId != null) {
            if (formSubType.value == 1 || formSubType.value == 2) {
                addOrganize()
            } else {
                addUser();
            }
        }
    }
}

function addTenant() {
    httpRequest({
        url: '/auth/tenant',
        method: 'post',
        data: {
            name: formName.value
        }
    }).then((res) => {
        if (res.code === 0) {
            dialogVisible.value = false
            loadData()
        }
    })
}

function addOrganize() {
    httpRequest({
        url: '/auth/organize/add',
        method: 'post',
        data: {
            parentId: parentData.value.organizeId == null? 0: parentData.value.organizeId,
            name: formName.value,
            type: formSubType.value,
            isManage: formIsManage.value == '是',
            tenantId: parentData.value.tenantId
        }
    }).then((res) => {
        if (res.code === 0) {
            dialogVisible.value = false
            loadData()
        }
    })
}

function addUser() {
    httpRequest({
        url: '/auth/user/add',
        method: 'post',
        data: {
            jobId: parentData.value.organizeId,
            username: formName.value,
            password: formPassword.value,
            type: parentData.value.showType == 1? 1: 2,
            tenantId: parentData.value.tenantId
        }
    }).then((res) => {
        if (res.code === 0) {
            dialogVisible.value = false
            loadData()
        }
    })
}

const defaultProps = {
  children: 'children',
  label: 'name',
}


</script>